<template>
  <el-form
    label-width="190px"
    class="setDevice-form setDevice-form-bacckend"
    :inline="true"
    :model="formData"
    :rules="rules"
    ref="backGroundForm"
  >
    <div class="formItem-contain">
      <el-form-item label="继电器反向设置">
        <el-select v-model="formData.invert" placeholder="请选择">
          <el-option
            v-for="item in invertOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-button class="btn-search" @click="confirmSet('invert')">确定</el-button>
    </div>
    <div class="formItem-contain">
      <el-form-item label="断电记忆">
        <el-select v-model="formData.powerRem" placeholder="请选择">
          <el-option
            v-for="item in powerRemOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-button class="btn-search" @click="confirmSet('powerRem')">确定</el-button>
    </div>
    <div class="formItem-contain">
      <el-form-item label="电压保护阈值">
        <el-select v-model="formData.overVoltage" placeholder="请选择">
          <el-option
            v-for="item in overVoltageOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div class="form-num-unit">V</div>
      </el-form-item>
      <el-button class="btn-search" @click="confirmSet('overVoltage')">确定</el-button>
    </div>
    <div class="formItem-contain">
      <el-form-item label="功率保护阈值">
        <el-select v-model="formData.overPower" placeholder="请选择">
          <el-option
            v-for="item in overPowerOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div class="form-num-unit">W</div>
      </el-form-item>
      <el-button class="btn-search" @click="confirmSet('overPower')">确定</el-button>
    </div>
    <div class="formItem-contain">
      <el-form-item label="电压校准(-100~100V)" prop="volAdj">
        <el-input type="number" v-model="formData.volAdj"></el-input>
        <div class="form-num-unit">V</div>
      </el-form-item>
      <el-button class="btn-search" @click="handleConfirm('volAdj')">确定</el-button>
    </div>
    <div class="formItem-contain">
      <el-form-item label="功率校准(-1000~1000V)" prop="powerAdj">
        <el-input type="number" v-model="formData.powerAdj"></el-input>
        <div class="form-num-unit">W</div>
      </el-form-item>
      <el-button class="btn-search" @click="handleConfirm('powerAdj')">确定</el-button>
    </div>
  </el-form>
</template>
<script>
export default {
  data() {
    const createRangeValidator = (min, max, fieldName, options = {}) => {
      return (rule, value, callback) => {
        if (value === "" || value === null || value === undefined) {
          callback(new Error(`请输入${fieldName}`));
        } else {
          const numValue = parseFloat(value);
          if (isNaN(numValue)) {
            callback(new Error("请输入有效数字"));
          } else if (options.multipleOf && numValue % options.multipleOf !== 0) {
            callback(new Error(`请输入${min}-${max}之间${options.multipleOf}的倍数值`));
          } else if (numValue < min || numValue > max) {
            callback(new Error(`输入值必须在${min}到${max}之间`));
          } else {
            callback();
          }
        }
      };
    };
    return {
      formData: {
        invert: "同向",
        powerRem: "断电记忆",
        overVoltage: 90, // 电压保护阈值 90, 300, 步数10
        overPower: 4000, // 功率保护阈值 4000, 6000, 步数100
        volAdj: 0, // 电压校准 -100, 100, 步数1
        powerAdj: 0, // 功率校准 -1000, 1000, 步数10
      },
      invertOptions: [
        { value: "0", label: "同向" },
        { value: "1", label: "反向" },
      ],
      powerRemOptions: [
        { value: "0", label: "断电记忆" },
        { value: "1", label: "上电关机" },
        { value: "2", label: "上电开机" },
      ],
      overVoltageOptions: this.handleOptions(90, 300, 10), // 电压保护阈值 90-300, 步数10
      overPowerOptions: this.handleOptions(-1000, 1000, 10), // 功率保护阈值 4000-6000, 步数100
      rules: {
        volAdj: [
          { required: true, message: "请输入电压校准值", trigger: "blur" },
          {
            validator: createRangeValidator(-100, 100, "电压校准值"),
            trigger: "blur",
          },
        ],
        powerAdj: [
          { required: true, message: "请输入功率校准值", trigger: "blur" },
          {
            validator: createRangeValidator(-1000, 1000, "功率校准值", {
              multipleOf: 10,
            }),
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    confirmSet(val) {
      console.log(val, "设置项");
    },
    handleConfirm(prop) {
      this.$refs.backGroundForm.validateField(prop, (errorMessage) => {
        if (errorMessage) {
          // 校验失败，错误信息已在表单中显示
          console.log(`校验失败: ${errorMessage}`);
        } else {
          // 校验成功，可以执行后续操作
          console.log(`${prop} 校验成功，值为: ${this.formData[prop]}`);
          // 这里可以添加实际的业务逻辑，例如发送请求更新设备参数
          this.$message.success(`${this.confirmSet(prop)} 设置成功`);
        }
      });
    },
    handleOptions(min, max, step) {
      const options = [];
      for (let i = min; i <= max; i += step) {
        options.push({
          value: i,
          label: `${i}`,
        });
      }
      return options;
    },
  },
};
</script>
<style lang="scss">
.setDevice-form.setDevice-form-bacckend .formItem-contain .el-form-item__content {
  width: 400px !important;
  margin-left: 0 !important;
}
.setDevice-form.setDevice-form-bacckend .formItem-contain .el-form-item__content {
  .el-input__inner,
  .el-select {
    width: 100% !important;
  }
}
.el-dialog__body .setDevice-form.setDevice-form-bacckend .el-form-item__error {
  top: 103%;
}
</style>
